<template>
  <div>
    <Header></Header>
    <div class="article">
      <el-row :gutter="20">
        <el-col :span="22">
          <el-input></el-input>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" ><i class="el-icon-zoom-in"></i>&nbsp;搜索</el-button>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="margin-top: 10px;">
        <el-col :span="20">
          <el-col :span="4">
            <span style="color: black;font-weight: bolder;">热门搜索：<i class="el-icon-s-promotion"></i></span>
          </el-col>
          <el-col :span="2">
            <span style="color: #5086fA;font-weight: bolder;"><a href="/searchlist?keyword=Java">Java</a></span>
          </el-col>
          <el-col :span="2">
            <span style="color: #5086fA;font-weight: bolder;"><a href="/searchlist?keyword=数据挖掘">数据挖掘</a></span>
          </el-col>
          <el-col :span="2">
            <span style="color: #5086fA;font-weight: bolder;"><a href="/searchlist?keyword=后台开发">后台开发</a></span>
          </el-col>
          <el-col :span="2">
            <span style="color: #5086fA;font-weight: bolder;"><a href="/searchlist?keyword=Java工程师">Java</a></span>
          </el-col>
          <el-col :span="2">
            <span style="color: #5086fA;font-weight: bolder;"><a href="/searchlist?keyword=C">C</a></span>
          </el-col>
          <el-col :span="2">
            <span style="color: #5086fA;font-weight: bolder;"><a href="/searchlist?keyword=C++">C++</a></span>
          </el-col>
          <el-col :span="2">
            <span style="color: #5086fA;font-weight: bolder;"><a href="/searchlist?keyword=PHP">PHP</a></span>
          </el-col>
          <el-col :span="2">
            <span style="color: #5086fA;font-weight: bolder;"><a href="/searchlist?keyword=Python">Python</a></span>
          </el-col>
          <el-col :span="2">
            <span style="color: #5086fA;font-weight: bolder;"><a href="/searchlist?keyword=运维">运维</a></span>
          </el-col>
          <el-col :span="2">
            <span style="color: #5086fA;font-weight: bolder;"><a href="/searchlist?keyword=.NET">.NET</a></span>
          </el-col>
        </el-col>
      </el-row>

    </div>

    <div class="article">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item><a href="">岗位信息</a></el-breadcrumb-item>
      </el-breadcrumb>
      <div class="article" style="margin-bottom: 20px;">
        <el-row :gutter="20">
          <el-col :span="24">
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="最具价值" name="salaryUp">

                <el-card v-for="(item,index) in postList" :key="item.id" class="box-card" shadow="hover">
                  <router-link :to="`/front/postdetail/${item.id}`">
                      <div>
                        <span class="job-name">{{item.name}}</span>
                        <span class="job-salary">{{item.salary}}</span>
                      </div>
                      <div style="margin-top: 10px;">
                        <div class="job-tag">工作城市：{{item.address}}</div>
                        <div class="job-tag" >招聘人数：{{item.count}}</div>
                        <div class="job-tag">浏览量：{{item.hit}}</div>
                      </div>
                      <div style="margin-top: 10px;">
                        <div class="job-tag" v-for="(item2,index) in item.tagList">
                          {{item2.name}}
                        </div>
                      </div>
                      <div style="margin-top: 10px;">
                        <div class="job-require">
                          工作要求： {{item.description}}
                        </div>
                      </div>
                      <div style="margin-top: 10px;" class="company">
                        <el-image
                          style="width: 100px; height: 100px;border-radius: 6px;"
                          :src="item.companyLogo"
                          fit="fit">

                        </el-image>
                        <div class="company-right">
                          <div class="company-name">
                            <a href="">{{item.companyName}}</a>
                          </div>
                          <div class="company-description">
                            {{item.companyDescription}}
                          </div>
                        </div>
                      </div>
                  </router-link>
                </el-card>
                <div class="viewMore"  @click="nextPage()">查看更多</div>
              </el-tab-pane>
              <el-tab-pane label="最新发布" name="releaseDate">
                <el-card v-for="(item,index) in postList" :key="item.id" class="box-card" shadow="hover">
                <router-link :to="`/front/postdetail/${item.id}`">
                  <div>
                    <span class="job-name">{{item.name}}</span>
                    <span class="job-salary">{{item.salary}}</span>
                  </div>
                  <div style="margin-top: 10px;">
                    <div class="job-tag">工作城市：{{item.address}}</div>
                    <div class="job-tag" >招聘人数：{{item.count}}</div>
                    <div class="job-tag">浏览量：{{item.hit}}</div>
                  </div>
                  <div style="margin-top: 10px;">
                    <div class="job-tag" v-for="(item2,index) in item.tagList">
                      {{item2.name}}
                    </div>
                  </div>
                  <div style="margin-top: 10px;">
                    <div class="job-require">
                      工作要求： {{item.description}}
                    </div>
                  </div>
                  <div class="company">
                    <el-image
                      style="width: 100px; height: 100px;border-radius: 6px;"
                      :src="item.companyLogo"
                      fit="fit">

                    </el-image>
                    <div class="company-right">
                      <div class="company-name">
                        <a href="">{{item.companyName}}</a>
                      </div>
                      <div class="company-description">
                        {{item.companyDescription}}
                      </div>
                    </div>
                  </div>
                </router-link>
                </el-card>
                <div class="viewMore"  @click="nextPage()">查看更多</div>
              </el-tab-pane>
              <el-tab-pane label="最具人气" name="hits">
                <el-card v-for="(item,index) in postList" :key="item.id" class="box-card" shadow="hover">
                  <router-link :to="`/front/postdetail/${item.id}`">
                    <div>
                      <span class="job-name">{{item.name}}</span>
                      <span class="job-salary">{{item.salary}}</span>
                    </div>
                    <div style="margin-top: 10px;">
                      <div class="job-tag">工作城市：{{item.address}}</div>
                      <div class="job-tag" >招聘人数：{{item.count}}</div>
                      <div class="job-tag">浏览量：{{item.hit}}</div>
                    </div>
                    <div style="margin-top: 10px;">
                      <div class="job-tag" v-for="(item2,index) in item.tagList">
                        {{item2.name}}
                      </div>
                    </div>
                    <div style="margin-top: 10px;">
                      <div class="job-require">
                        工作要求： {{item.description}}
                      </div>
                    </div>
                    <div class="company">
                      <el-image
                        style="width: 100px; height: 100px;border-radius: 6px;"
                        :src="item.companyLogo"
                        fit="fit">

                      </el-image>
                      <div class="company-right">
                        <div class="company-name">
                          <a href="">{{item.companyName}}</a>
                        </div>
                        <div class="company-description">
                          {{item.companyDescription}}
                        </div>
                      </div>
                    </div>
                  <div>
                    <span class="job-name">{{item.name}}</span>
                    <span class="job-salary">{{item.salary}}</span>
                  </div>
                  <div style="margin-top: 10px;">
                    <div class="job-tag">工作城市：{{item.address}}</div>
                    <div class="job-tag" >招聘人数：{{item.count}}</div>
                    <div class="job-tag">浏览量：{{item.hit}}</div>
                  </div>
                  <div style="margin-top: 10px;">
                    <div class="job-tag" v-for="(item2,index) in item.tagList">
                      {{item2.name}}
                    </div>
                  </div>
                  <div style="margin-top: 10px;">
                    <div class="job-require">
                      工作要求： {{item.description}}
                    </div>
                  </div>
                  </router-link>
                </el-card>
                <div class="viewMore" id="viewMoreButton" @click="nextPage()">查看更多</div>
              </el-tab-pane>
            </el-tabs>
          </el-col>
        </el-row>
      </div>
    </div>
    <Footer></Footer>
  </div>
</template>
<script>
import '@/assets/css/styles.css';
import Header from "@/front/inc/Header";
import Footer from "@/front/inc/Footer";
import {getPostListByOrder} from "@/api/post";



//默认的查询参数
const defaultListQuery = {
  currentPage: 1,//当前页码
  pageSize: 5,//每页显示的记录数
  total: 0,//总记录数
  queryParams: {}//查询条件
};
export default {
  name: "index",
  components: {Footer, Header},
  data(){
    return {
      listQuery: Object.assign({}, defaultListQuery),//查询参数
      totalPages:null,//分页总页数
      postList: [],//分页职位数据
      activeName:'salaryUp',
    }
  },
  created() {
    this.getPostListByOrder();
  },
  methods:{
    //处理选项卡被点击
    handleClick(tab, event) {
      console.log(tab.label);
      this.listQuery.queryParams.keyword = tab.label;
      this.getPostListByOrder();
    },
    //获取职位列表
    getPostListByOrder(){
      getPostListByOrder(this.listQuery).then(res=>{
        this.postList = res.data.rows;
        this.totalPages=res.data.totalPages;
      })
    },



    //进行下一页翻页
    nextPage(){
      //一直可以有数据，如果到了最后一页，重新查第一页数据！
      if (this.listQuery.currentPage === this.totalPages){
        this.listQuery.currentPage = 1;
        this.getPostList2();
        return false;
      }else {
        this.listQuery.currentPage += 1;
        this.getPostList2();
      }

    }

  }
}
</script>

<style scoped>

.hot-search{
  margin-top: 7px;
}
.hot-search dl dd{
  margin-left: -10px;
}
.hot-search dl dd a{
  color: #6aa2e4 !important;
  cursor: pointer;
}


.box-card {
  height: 300px;
  margin-bottom: 10px;
}

.job-name{
  color: #409eff;
  font-weight: bold;
  font-size: 18px;
  padding-left: 6px;
}
.job-salary{
  float: right;
  padding: 3px 0;
  color: red;
}

.job-tag{
  display: inline-block;
  width: 200px;
  height: 26px;
  padding: 0 5px;
  font-size: 12px;
  line-height: 26px;
  color: #999;
  border: 1px solid #F0F0F0;
  border-radius: 3px;
  text-align: center;
  margin-left: 6px;
}
.job-require{
  padding-top: 6px;
  display: inline-block;
  margin: 0;
  color: #999;
}


.company {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px dashed #E0E0E0;
}
.company img{
  display: inline-block;
}

.company .company-right{
  margin-left: 54px;
  position: absolute;
  display: inline-block;
}
.company .company-right .company-name a{
  font-size: 18px;
  color: #555555;

}
.company .company-right .company-name a:hover{
  color: #6aa2e4;
}
.company .company-right .company-description{
  padding-top: 10px;
  font-size: 14px;
  color: #999999;
}
.viewMore{
  display: block;
  width: 387px;
  height: 42px;
  line-height: 42px;
  margin: 36px auto 0;
  background: #FFF;
  border: 1px solid #6aa2e4;
  font-size: 16px;
  color: #6aa2e4;
  text-align: center;
  -webkit-transition: background .3s,color .1s;
  cursor: pointer;
}

</style>
